<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>condition</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="condition1" v-if="ok">
    <h1>Hey1</h1>
    <p>Hey2</p>
    <p>Hey3</p>
</div>
<div id="condition2">
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email">
  </template>
  <button value="change it" v-on:click="changeLogType()"/>
</div>

<script>
  var vm1 = new Vue({
    el: '#condition1',
    data: {
      ok: true
    }
  })
  var vm2 = new Vue({
    el: '#condition2',
    data: {
      loginType: 'username'
    },
    methods: {
      changeLogType: function () {
        this.loginType = 'email';
      }
    }
  })
</script>
</body>
</html>
